<!--
 * @Author: zhangzhen
 * @Date: 2022-10-21 09:36:12
 * @LastEditors: zhangzhen
 * @LastEditTime: 2022-10-21 09:40:41
 * 
-->
<template>
  <div>
    <div>{{ count }}</div>
    <button @click="addCount">累加</button>

    <h1>{{ username }}</h1>
    <h1>{{ obj.username }}</h1>
    <el-button @click="changeObj">改变</el-button>
    <br />
    <hr />
    <el-button type="primary" @click="changeRouter"> 跳转路由 </el-button>
    <br />
    <hr />
    <el-button>hello</el-button>
    <modalVue visible="false" />
  </div>
</template>

<script>
import { reactive, ref, toRefs, toRef } from "vue";
import { useRouter, useRoute } from "vue-router";
import modalVue from "./modal.vue";
export default {
  components: {
    modalVue,
  },
  setup() {
    let count = ref(0);

    let addCount = () => {
      count.value++;
    };

    let obj = reactive({
      username: "张三",
    });
    let changeObj = () => {
      if (obj.username === "李四") {
        obj.username = "刘备";
      } else {
        obj.username = "李四";
      }
    };
    //等于  深拷贝
    let newObj = toRefs(obj);
    //浅拷贝
    let newObj2 = toRef(obj, "username");
    newObj2.value = "刘备";

    newObj.username = "王五";
    // obj.username = '关羽'

    const router = useRouter();
    const route = useRoute();
    // console.log(route);

    // console.log(route.fullPath);
    // console.log(route.path);
    // console.log(route.name);
    const changeRouter = () => {
      router.push({
        path: "/father",
        query: {
          name: "zs",
        },
      });
    };

    return { count, addCount, ...newObj, newObj2, obj, changeObj, changeRouter };
  },
  created() {},
  methods: {},
};
</script>

<style scoped></style>
